<template>
<div >
  <div id="container" style="height:400px"></div>
</div>
</template>

<script>
export default{
//组件名称
name:'demo',
//组件参数接收来自父组件的数据
props:{},
//组件状态值
data(){
return{}
},
//计算属性
computed:{},
//侦听器
watch:{},
//组件方法
methods:{
  
  initCharts(){
    var chart = Highcharts.chart("container", {
      title: {
			text: '中国疫情发展趋势'
		},
		xAxis: {
			categories: ['安徽', '江苏', '浙江', '河北', '广东']
		},
		credits: {
			enabled: true
		},
		plotOptions: {
			column: {
				
				dataLabels: {
					enabled: true,
					// verticalAlign: 'top', // 竖直对齐方式，默认是 center
					inside: true
				}
			}
		},
		series: [{
			name: '',
			data: [5, 3, 4, 5, 2]
		}, {
			name: '',
			data: [2, -2, -3, 2, 1]
		}, {
			name: '',
			data: [3, 4, 4, -2, 5]
		}]
	});

  }
},
//以下是生命周期钩子
/**
*组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
*/
created(){
},
/**
*el被新创建的vm.el替换，并挂载到实例上去之后调用该钩子。
*如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内。
*/
mounted(){
  this.initCharts()
},
/**
*实例销毁之前调用。在这一步，实例仍然完全可用。
*/
beforeDestroy(){
},
/**
*Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，
*所有的事件监听器会被移除，所有的子实例也会被销毁。
*/
destroyed(){
}
}
</script>

<!--Add"scoped"attributetolimitCSStothiscomponentonly-->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<stylescoped>

</style>